<template>
  <div class="ly-absolute" :style="calcStyle" :class="{active:active}">
    <div class="ly-absolute-content">
      <!-- <div class="ly-arrow hollow"></div> -->
      <slot></slot>
    </div>
  </div>
</template>
<script>
/**
 * @param {Element} ignore 忽略的事件源
 * @param {Function} callback 回调函数
 * @param {String} eventName 时间名
 * @returns {Function} 移除监听事件
 */
var triggerOnce = function (ignore, callback, eventName = 'click') {
    var temp = function (ev) {
        var isTrigger = true, tar = ev.target;
        // 如果目标ignore Dom包含 当前事件源Dom 则新增监听事件
        if(ignore instanceof Array){
            ignore.forEach((el)=>{
                if (el.contains(tar)) {
                    isTrigger = false;
                }
            })
        }else if (ignore.contains(tar)) {
            isTrigger = false;
        }
        // 如果目标ignore Dom不包含 当前事件源Dom 则删除监听事件
        if (isTrigger) {
            callback(ev);
            document.removeEventListener(eventName, temp, true);
        }
    };
    document.addEventListener(eventName, temp, true);
    return function () {
        document.removeEventListener(eventName, temp, true);
    };
};
export default {
  name:'absCpt',
  inject:['placement'],
  props:{
    placement:{},
    val:{
      type:Boolean,
    }
  },
  data() {
    return {
        active:false,
        parentDom:undefined,
        parWidth: undefined,
        parHeight: undefined
      }
  },
  watch:{
    val:{
      immediate:true,
      handler(newData){
        this.active = newData
      }
    },
    active(val){
      // if(!val){
      //   this.removeEventTriggerOnce()
      //   this.removeEventTriggerOnce = null
      // }
      this.$parent.onHandlerActive(val)
    },
    parentDom(n){
      if(n.$options._componentTag=="ly-popover"){
          const parentRect = this.parentDom.$el.getBoundingClientRect()
          this.parWidth = parentRect.width
          this.parHeight = parentRect.height
      }
    },
  },
  computed:{
    calcStyle(){
      if(this.parentDom&&this.parWidth&&this.parHeight){
        let resObj = {}
        switch(this.placement){
          case 'top-start':
            resObj = Object.assign({},{
              top:0,
              transform: `translate(0px, -100%)`
            })
          break
          case 'top-center':
            resObj = Object.assign({},{
              top:0,
              transform: `translate(${this.parWidth/2}px, -100%)`
            })
          break
          case 'top-end':
            resObj = Object.assign({},{
              top:0,
              transform: `translate(${this.parWidth}px, -100%)`
            })
          break
          case 'bottom-start':
            resObj = Object.assign({},{
              top:this.parHeight + 'px',
              transform: `translate(0px, 0px)`
            })
          break
          case 'bottom-center':
            resObj = Object.assign({},{
               top:this.parHeight + 'px',
              transform: `translate(${this.parWidth/2}px, 0px)`
            })
          break
          case 'bottom-end':
            resObj = Object.assign({},{
              top:this.parHeight + 'px',
              transform: `translate(${this.parWidth}px, 0px)`
            })
          break
           case 'left-start':
            resObj = Object.assign({},{
              top:'0px',
              transform: `translate(-100%, 0px)`
            })
          break
          case 'left-center':
            resObj = Object.assign({},{
              top:'0px',
              transform: `translate(-100%, ${this.parHeight/2}px)`
            })
          break
          case 'left-end':
            resObj = Object.assign({},{
              top:'0px',
              transform: `translate(-100%, ${this.parHeight}px)`
            })
          break
            case 'right-start':
            resObj = Object.assign({},{
              top:'0px',
              transform: `translate(${this.parWidth}px, 0px)`
            })
          break
          case 'right-center':
            resObj = Object.assign({},{
              top:'0px',
              transform: `translate(${this.parWidth}px, ${this.parHeight/2}px)`
            })
          break
          case 'right-end':
            resObj = Object.assign({},{
              top:'0px',
              transform: `translate(${this.parWidth}px, ${this.parHeight}px)`
            })
          break
        }
        return resObj
      }
    }
  },
  methods:{
    toggle(triggerEl,ev){
      let absEl = this.$el;
      if(absEl.contains(ev.target)){
        return;
      }
      this.active = !this.active
      if(this.active){
        this.removeEventTriggerOnce = triggerOnce(triggerEl,(e) => {
          // 事件源不在目标dom内  即鼠标点击非目标区域则触发回调函数
          this.active = false
        })
      }
    },
    getParentDom(dom){
      this.parentDom = dom
    },
    hide(){
        this.active = false;
    },
    show(){
      if(!this.active){
         this.active=true;
      }
    }
  }
}
</script>
<style lang="scss">

  .ly-absolute{
    position: absolute;
    z-index: 1001;
    display: none;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    padding: 10px;
    min-width: 200px;
    &.active {
      display: block;
    }
  }
</style>